<template>
  <div>
    <group>
      <!-- <x&#45;switch :title="$t('Show Me')" v&#45;model="show"></x&#45;switch> -->
    </group>
    <!-- <div v&#45;transfer&#45;dom> -->
    <!--   <alert v&#45;model="show" :title="$t('Congratulations')" @on&#45;show="onShow" @on&#45;hide="onHide"> {{ $t('Your Message is sent successfully~') }}</alert> -->
    <!-- </div> -->
    <!--  -->
    <!-- <group title="prop:content"> -->
    <!--   <x&#45;switch :title="$t('Show Me')" v&#45;model="show2"></x&#45;switch> -->
    <!-- </group> -->
    <!-- <div v&#45;transfer&#45;dom> -->
    <!--   <alert v&#45;model="show2" :title="$t('Congratulations')" :content="$t('Your Message is sent successfully~')"></alert> -->
    <!-- </div> -->

    <group :title="$t('Use as a plugin')">
      <cell :title="$t('Show Me')" @click.native="showPlugin" is-link></cell>
      <!-- <cell :title="$t('will auto close in 3s')" @click.native="showPluginAuto" is&#45;link></cell> -->
    </group>
  </div>
</template>

<i18n>
Show Me:
  zh-CN: 显示
Use as a plugin:
  zh-CN: 以插件方式调用
Congratulations:
  zh-CN: 恭喜
Your Message is sent successfully~:
  zh-CN: 消息已成功发送
Do you agree?:
  zh-CN: 同意不?
will auto close in 3s:
  zh-CN: 3秒后关闭
</i18n>

<script>
import { Alert, Group, XSwitch, Cell, TransferDomDirective as TransferDom } from 'vux'

export default {
  directives: {
    TransferDom
  },
  components: {
    Alert,
    Group,
    XSwitch,
    Cell
  },
  data () {
    return {
      show: false,
      show1: false,
      show2: false
    }
  },
  methods: {
    // onHide () {
    //   console.log('on fucking hide')
    // },
    // onShow () {
    //   console.log('on show')
    // },
    showPlugin () {
      this.$vux.alert.show({
        title: 'VUX is Cool',
        content: this.$t('Do you agree?'),
        onShow () {
          console.log('Plugin: I\'m showing')
        },
        onHide () {
          console.log('Plugin: I\'m hiding fucking now')
        }
      })
    },
    showPluginAuto () {
      this.showPlugin()
      setTimeout(() => {
        this.$vux.alert.hide()
      }, 3000)
    }
  }
}
</script>
